<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>社会保障卡新制卡申领</title>

		<link rel="stylesheet" href="../../../../lib/thirdparty/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../css/imgUpdate.css" />
		<link rel="stylesheet" href="../../css/treeControl.css" />
		<link rel="stylesheet" href="../../css/global.css" />
		<link rel="stylesheet" type="text/css" href="../../../../lib/css/header.css" />
		<link rel="stylesheet" type="text/css" href="../../../../lib/css/loading.css" />
		<link rel="stylesheet" type="text/css" href="../../../../lib/css/mainpage.css" />
		<link type="text/css" rel="stylesheet" href="../../../../lib/thirdparty/mui/v3.3.0/css/mui.min.css">
		<link type="text/css" href="../../../../lib/css/common.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../photoCut/css/complain.css" />

		<link rel="stylesheet" type="text/css" href="../photoCut/css/cropper.css">
		<link rel="stylesheet" type="text/css" href="../photoCut/css/myCrop.css">
		<style>
			#photoBtn {
				display: block;
				margin: 10px auto;
				padding: 9px;
				text-align: center;
				color: #fff;
				border: 0;
				background: #007AFF;
				border-radius: 8px;
				border-width: 1px;
				border-style: solid;
			}
			
			.mui-table-view-cell-myquestion {
				position: relative;
				overflow: hidden;
				padding: 11px 15px;
				/*height: 54px;*/
				padding: 5px;
			}
			
			.mui-table-cell-my {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: #fff;
			}
			
			.mui-table-cell {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: #fff;
				height: 100%;
				overflow-y: auto;
			}
			
			.list-div li:before {
				content: "";
				width: 40px;
				margin-left: -65px;
			}
			
			.list-div li:after {
				content: "";
				width: 40px;
				margin-right: -65px;
			}
			
			.list-div li {
				width: 33%;
			}
			
			.modal-dialog .modal-header {
				background-color: #1386f1;
				color: #fff;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}
			
			.modal-content {
				position: relative;
				background-color: #fff;
				-webkit-background-clip: padding-box;
				background-clip: padding-box;
				border: 1px solid #999;
				border: 1px solid rgba(0, 0, 0, .2);
				border-radius: 6px;
				outline: 0;
				-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
				box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
			}
			
			.modal {
				background-color: rgba(0, 0, 0, 0.5);
				padding-top: 20%;
				;
			}
		</style>
	</head>

	<body ng-app="app.cardModule" ng-controller="CardApplyUploadCtrl" style="height: 100%;background: #efeff4;">

		<ul class="list-div">
			<li ng-repeat="li in lelists" ng-class="{'active': li.blue,'atived': li.blued}">
				<span ng-bind="li.code"></span>
				<p ng-bind="li.msg"></p>
			</li>
		</ul>

		<div ng-show="showUploadPage" class="container matop" style="margin-top: 15px; background-color: #efeff4;">

			<section>
				<div>
					<img id="showImg" style="margin-top: 10px; width: 50%;display: block;" />
					<input id="photoBtn" class="photoBtn" type="button" onclick="document.getElementById('inputImage').click()" value="请上传制卡照片">
					<p>正面白底免冠彩色照片。数字相片为JPG格式的图像文件，宽高规格为358×441像素，分辨率为350DPI，文件大小为15K-60K。</p>
				</div>
				<!-- 可以增加自己的样式 -->
				<input id="inputImage" type="file" accept="image/*" style="display: none;" />
			</section>
		</div>

		<div class="container" style="padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200;" id="containerDiv">
			<div class="row" style="display: none;" id="imgEdit">
				<div class="col-md-9">
					<div class="img-container">
						<img src="" alt="Picture">
					</div>
				</div>
			</div>
			<div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
				<div class="col-md-9 docs-buttons">
					<div class="btn-group">
						<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" style="height: auto;">
	            <span class="docs-tooltip" data-toggle="tooltip">
	              <span class="fa fa-power-off">取消</span>
	            </span>
                </button>
					</div>

					<div class="btn-group btn-group-crop " style="float: right;">
						<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 358, &quot;height&quot;: 441 }" style="height: auto;margin-right: 17px;">
                    <span class="docs-tooltip btns" data-toggle="tooltip" title="">确认</span>
                    
                </button>
					</div>

				</div>

			</div>
		</div>

		<div ng-show="showUploadPage">
			<div style="text-align: center;margin: 30px 18px;">
				<button type="button" style="" id="submitBtn" class="blue_btn_next" ng-click="submitClick()">提交审核
        </button>
			</div>
		</div>
		<div ng-show="!showUploadPage">
			<div id="resultdiv">
				<div class="weui-cells font-14" style="margin-top: 5px;">
					<div class="text-center">
						<img class="logo-img" src="../../img/pass.png" />
					</div>
					<div class="text-center">
						<label class="font-14 sbcg-p">您已提交成功，请在《业务进度查询》中关注处理结果！</label>
					</div>

				</div>
				<button class="btns" ng-click="backClick()">完成</button>
			</div>
		</div>

		<!--<script src="../lib/js/template.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../../../lib/thirdparty/vconsole.min.js"></script>
		<script src="../../../../lib/thirdparty/jquery/jquery-1.9.1.min.js"></script>
		<script src="../../../../lib/thirdparty/angularjs/1.5.8/angular.min.js"></script>
		<script src="../../../../lib/thirdparty/jquery-weui/js/jquery-weui.min.js"></script>
		<script src="../../../../lib/thirdparty/bootstrap/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
		<script src="../../../../lib/js/min/j2c_main_code.js"></script>

		<script src="../../../../config/common.js"></script>
		<script src="../../../../config/common-check.js"></script>
		<script src="../../../../config/app-config.js"></script>
		<!--		上传图片指令相关-->
		<script type="text/javascript" src="../../../directives/imgUpdateCamera/imgUpdateCamera.js"></script>
		<script type="text/javascript" src="../../../directives/imgUpdateEntirety/imgUpdateEntirety.js"></script>
		<script type="text/javascript" src="../../../directives/imgUpdateMaterial/imgUpdateMaterial.js"></script>
		<script type="text/javascript" src="../../../directives/imgUpdateWidget/imgUpdateWidget.js"></script>
		<script type="text/javascript" src="../../../directives/imageCompress.js"></script>

		<script src="../code/code.js"></script>
		<script src="../js/route.js"></script>
		<script type="text/javascript" src="../js/cardApplyService.js"></script>
		<script type="text/javascript" src="../js/cardApplyUpload.js"></script>

		<script type="text/javascript" src="../photoCut/js/exif.js"></script>
		<script type="text/javascript" src="../photoCut/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../photoCut/js/cropper.js"></script>
		<script type="text/javascript" src="../photoCut/js/myCrop.js?v=1.0.4"></script>

		<script type="text/javascript">
			var fileImg = "";
			var fileimgChanged = false;

			$(function() {

				$("#imgCutConfirm").bind("click", function() {
					$("#containerDiv").hide();
					$("#imgEdit").hide();
					$("#getCroppedCanvasModal").modal("hide");
				})
			})
		</script>
	</body>

</html>